<template>
  <el-dialog
    title="通知配置"
    width="80%"
    :visible.sync="checkRow"
    :before-close="submit"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :append-to-body="true">
    <div style="width: 80%;margin: 0 auto;">
      <el-form ref="checkData" :model="checkData" label-width="150">
        <el-row>
          <el-form-item label="模板名称 :" prop="name">
            <el-input :disabled="true" size="mini" v-model="checkData.name" style="width: 30%"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-col span="12">
            <el-form-item label="通知方式 :" prop="notice" class="form_item">
              <el-radio-group :disabled="check" v-model="checkData.notificeType">
                <el-radio :label="0">飞书</el-radio>
                <el-radio :label="1">企业微信</el-radio>
              </el-radio-group>
              <el-checkbox style="margin-left: 20px" :disabled="true" :checked="true">系统通知
              </el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 订单管理-->
        <el-row>
          <el-form-item label="订单管理 :" class="form_item">
            <div class="switch_item">
              <div style="width: 90px"></div>
              <div>
                <span class="switch_label">通知群:</span>
                <el-select :disabled="check" size="mini" v-model="checkData.offerNoticeGroup"></el-select>
              </div>
            </div>
            <!-- 创建订单-->
            <div class="switch_item">
              <span class="switch_label Sub_option">状态改变 :</span>
              <el-switch :active-value="100" :inactive-value="0" :disabled="check"
                         class="switch" v-model="checkData.offerNotice" active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
              <div>
                <span class="switch_label">添加抄送方:</span>
                <el-select :disabled="check" size="mini" multiple v-model="checkData.offerRole">
                  <el-option
                    v-for="item in informRoleList"
                    :key="item.value"
                    :label="item.roleName"
                    :value="item.roleAlias">
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- 编辑订单-->
            <div class="switch_item">
              <span class="switch_label Sub_option">编辑订单 :</span>
              <el-switch :active-value="100" :inactive-value="0" :disabled="check"
                         class="switch" v-model="checkData.offerEdit" active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
              <div>
                <span class="switch_label">添加抄送方:</span>
                <el-select :disabled="check" size="mini" multiple v-model="checkData.offerEditNoticeRoles">
                  <el-option
                    v-for="item in informRoleList"
                    :key="item.value"
                    :label="item.roleName"
                    :value="item.roleAlias">
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- 订单冲突-->
            <div class="switch_item">
              <span class="switch_label Sub_option">订单冲突 :</span>
              <el-switch :active-value="100" :inactive-value="0" :disabled="check" class="switch"
                         v-model="checkData.offerConflict"
                         active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
              <div>
                <span class="switch_label">添加抄送方:</span>
                <el-select :disabled="check" size="mini" multiple v-model="checkData.offerConflictNoticeRoles">
                  <el-option
                    v-for="item in informRoleList"
                    :key="item.value"
                    :label="item.roleName"
                    :value="item.roleAlias">
                  </el-option>
                </el-select>
              </div>
            </div>
          </el-form-item>
        </el-row>

        <!-- 需求沟通-->
        <el-row>
          <el-form-item label="需求沟通 :" class="form_item">
            <div class="switch_item">
              <el-switch :active-value="100" :inactive-value="0" :disabled="check" class="switch"
                         v-model="checkData.requestCommunicate"
                         active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
              <div><span class="switch_label">通知群:</span>
                <el-select :disabled="check" size="mini" v-model="checkData.requestCommunicateNoticeGroup"></el-select>
              </div>
            </div>
            <!-- 创建需求-->
            <div class="switch_item">
              <span class="switch_label Sub_option">创建需求 :</span>
              <el-switch :active-value="100" :inactive-value="0" :disabled="check"
                         class="switch" v-model="checkData.requestCreate" active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
              <div>
                <span class="switch_label">添加抄送方:</span>
                <el-select :disabled="check" size="mini" multiple v-model="checkData.requestCreateNoticeRoles">
                  <el-option
                    v-for="item in informRoleList"
                    :key="item.value"
                    :label="item.roleName"
                    :value="item.roleAlias">
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- 分配任务-->
            <div class="switch_item">
              <span class="switch_label Sub_option">分配任务 :</span>
              <el-switch :active-value="100" :inactive-value="0" :disabled="check"
                         class="switch" v-model="checkData.assignTask" active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
              <div>
                <span class="switch_label">添加抄送方:</span>
                <el-select :disabled="check" size="mini" multiple v-model="checkData.assignTaskNoticeRoles">
                  <el-option
                    v-for="item in informRoleList"
                    :key="item.value"
                    :label="item.roleName"
                    :value="item.roleAlias">
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- 上传成品-->
            <div class="switch_item">
              <span class="switch_label Sub_option">上传成品 :</span>
              <el-switch :active-value="100" :inactive-value="0" :disabled="check"
                         class="switch" v-model="checkData.uploadProduct"
                         active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
              <div>
                <span class="switch_label">添加抄送方:</span>
                <el-select :disabled="check" size="mini" multiple v-model="checkData.uploadProductNoticeRoles">
                  <el-option
                    v-for="item in informRoleList"
                    :key="item.value"
                    :label="item.roleName"
                    :value="item.roleAlias">
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- 制作中素材-->
            <div class="switch_item">
              <span class="switch_label Sub_option" style="margin-left:55px;">制作中素材 :</span>
              <el-switch :active-value="100" :inactive-value="0"
                         class="switch" v-model="checkData.inProduction"
                         active-color="#13ce66"
                         inactive-color="#ff4949" :disabled="check"></el-switch>
              <div>
                <span class="switch_label">添加抄送方:</span>
                <el-select size="mini" multiple v-model="checkData.inProductionNoticeRoles"
                           :disabled="check">
                  <el-option
                    v-for="(item,index) in informRoleList"
                    :key="index"
                    :label="item.roleName"
                    :value="item.roleAlias">
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- 成品确认-->
            <div class="switch_item">
              <span class="switch_label Sub_option">成品确认 :</span>
              <el-switch :active-value="100" :inactive-value="0" :disabled="check"
                         class="switch" v-model="checkData.productConfirm"
                         active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
              <div>
                <span class="switch_label">添加抄送方:</span>
                <el-select :disabled="check" size="mini" multiple v-model="checkData.productConfirmNoticeRoles">
                  <el-option
                    v-for="item in informRoleList"
                    :key="item.value"
                    :label="item.roleName"
                    :value="item.roleAlias">
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- 追加需求-->
            <div class="switch_item">
              <span class="switch_label Sub_option">追加需求 :</span>
              <el-switch :active-value="100" :inactive-value="0" :disabled="check"
                         class="switch" v-model="checkData.requestAdd" active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
              <div>
                <span class="switch_label">添加抄送方:</span>
                <el-select :disabled="check" size="mini" multiple v-model="checkData.requestAddNoticeRoles">
                  <el-option
                    v-for="item in informRoleList"
                    :key="item.value"
                    :label="item.roleName"
                    :value="item.roleAlias">
                  </el-option>
                </el-select>
              </div>
            </div>
            <!--  内容审核      -->
            <div class="switch_item">
              <span class="switch_label Sub_option">内容审核 :</span>
              <el-switch :active-value="100" :inactive-value="0"
                         class="switch" v-model="checkData.requestContentAudit" active-color="#13ce66"
                         inactive-color="#ff4949" :disabled="check"></el-switch>
              <div>
                <span class="switch_label">添加抄送方:</span>
                <el-select  size="mini" multiple v-model="checkData.requestContentAuditNoticeRoles" :disabled="check">
                  <el-option
                    v-for="(item,index) in informRoleList"
                    :key="index"
                    :label="item.roleName"
                    :value="item.roleAlias">
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- 编辑需求    -->
            <div class="switch_item">
              <span class="switch_label Sub_option">编辑需求 :</span>
              <el-switch :active-value="100" :inactive-value="0"
                         class="switch" v-model="checkData.requestEdit" active-color="#13ce66"
                         inactive-color="#ff4949" :disabled="check"></el-switch>
              <div>
                <span class="switch_label">添加抄送方:</span>
                <el-select  size="mini" multiple v-model="checkData.requestEditNoticeRoles" :disabled="check">
                  <el-option
                    v-for="(item,index) in informRoleList"
                    :key="index"
                    :label="item.roleName"
                    :value="item.roleAlias">
                  </el-option>
                </el-select>
              </div>
            </div>
          </el-form-item>
        </el-row>
        <!-- 素材审核-->
        <el-row>
          <el-form-item label="素材审核 :" class="form_item">
            <div class="switch_item">
              <el-switch :active-value="100" :inactive-value="0" :disabled="check"
                         class="switch" v-model="checkData.creativeAudit" active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
              <div>
                <span class="switch_label">通知群:</span>
                <el-select :disabled="check" size="mini" v-model="checkData.creativeAuditNoticeGroup"></el-select>
              </div>
            </div>
            <!-- 提交审核-->
            <div class="switch_item">
              <span class="switch_label Sub_option">提交审核 :</span>
              <el-switch :active-value="100" :inactive-value="0" :disabled="check"
                         class="switch" v-model="checkData.auditSubmit" active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
              <div>
                <span class="switch_label">添加抄送方:</span>
                <el-select :disabled="check" size="mini" multiple v-model="checkData.auditSubmitNoticeRoles">
                  <el-option
                    v-for="item in informRoleList"
                    :key="item.value"
                    :label="item.roleName"
                    :value="item.roleAlias">
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- 审核结果-->
            <div class="switch_item">
              <span class="switch_label Sub_option">审核结果 :</span>
              <el-switch :active-value="100" :inactive-value="0" :disabled="check"
                         class="switch" v-model="checkData.auditResult" active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
              <div>
                <span class="switch_label">添加抄送方:</span>
                <el-select :disabled="check" size="mini" multiple v-model="checkData.auditResultNoticeRoles">
                  <el-option
                    v-for="item in informRoleList"
                    :key="item.value"
                    :label="item.roleName"
                    :value="item.roleAlias">
                  </el-option>
                </el-select>
              </div>
            </div>
          </el-form-item>
        </el-row>
        <el-row style="display: flex;justify-content: flex-end">
          <el-button size="mini" @click="submit">取 消</el-button>
          <el-button v-if="!check" size="mini" type="primary" @click="submit">确 定</el-button>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import {getList} from "@/api/system/role";

export default {
  name: "checkTemplate",
  props: {
    checkRow: {
      type: Boolean
    },
    checkData: {
      type: Object
    }
  },
  created() {
    getList().then(res => {
      this.informRoleList = res.data.data.records
    })
  },
  data() {
    return {
      check: true,
      informRoleList: [],
    }
  },
  methods: {
    /*确定按钮函数*/
    submit() {
      this.checkRow = false
      this.$emit('closeDialog', this.checkRow)
    }
  }
}
</script>

<style scoped lang="scss">
.form_item {
  padding-left: 10px;
}

.switch_item {
  margin-bottom: 1em;
  display: flex;
  align-items: center;

  .switch {
    padding: 0 20px;
  }

  .switch_label {
    margin-right: 20px;
  }

  .Sub_option {
    margin-left: 5em;
  }
}

.delete_icon {

}

.offer-status-alter {
  margin-top: 20px;
  margin-left: 25px
}

.select-template {
  margin-left: 120px;
  width: 200px;
  margin-bottom: 20px;
}
</style>
